<!-- scoped样式 对其他组件不影响-->
<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	/* 顶部 */
	.top {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #333333;
		color: white;
		text-align: center;
	}

	ul li {
		display: inline-block;
	}

	ul a {
		color: white;
		padding: 10px;
	}

	/* 营销字 */
	.yx {
		display: inline-block;
		width: 52px;
		border-radius: 10px;
		height: 30px;
		line-height: 30px;

		background-color: #42B983;
	}

	/* 营销电话 */
	.top1 {
		width: 100%;
		height: 80px;
	}

	.top1 .aq {
		width: 1200px;
		height: 80px;
		/* line-height: 80px; */
		margin: 0 auto;
		/* background-color: antiquewhite; */
	}

	.top1 .aq a {
		color: #666666;
	}

	/* bana */
	#banna {
		width: 100%;
		height: 350px;
		background-color: #42B983;
	}

	#banna img {
		width: 100%;
		height: 378px;
	}

	/* 搜索引擎 */
	.content_part03 {
		font-family: 微软雅黑;
		width: 100%;
		height: 600px;
		background-size: 100%;
		position: relative;
	}

	.center_content {
		font-family: 微软雅黑;
		height: 600px;
		width: 1050px;
		margin: 0 auto;
		position: relative;
	}

	.center_content .title {
		font-family: 微软雅黑;
		padding-top: 55px;
		font-size: 36px;
		color: #333;
		text-align: center;
	}

	.center_content .title span {
		font-family: 微软雅黑;
		text-align: center;
		font-size: 48px;
		color: #00b389;
	}

	body>div>div.content_part03>div>div.main_content {
		font-family: 微软雅黑;
		width: 768px;
		height: 332px;
		margin-top: 100px;
		margin-left: 134px;
		position: absolute;
	}

	body>div>div.content_part03>div>div.main_content>div.contentText {
		font-family: 微软雅黑;
		width: 414px;
		float: left;
		position: relative;
	}

	.text01 {
		margin-left: 60px;
		margin-top: 60px;
		font-family: 微软雅黑;
		font-size: 24px;
		color: #333;
	}

	.text02 {
		margin-left: 60px;
		font-family: 微软雅黑;
		font-size: 36px;
		color: #333;
		font-weight: bold;
		margin-top: 33px;
	}

	.text03 {
		margin-left: 60px;
		font-family: 微软雅黑;
		font-size: 18px;
		color: #333;
		margin-top: 12px;
	}

	.text04 {
		margin-left: 60px;
		font-family: 微软雅黑;
		margin-top: 48px;
		font-size: 18px;
		color: #666;
	}

	.text04 span {
		font-family: 微软雅黑;
		font-size: 18px;
		color: #00b389;
		font-weight: bold;
	}

	.text05 {
		margin-left: 60px;
		font-family: 微软雅黑;
		font-size: 18px;
		color: #666;
		margin-top: 10px;
	}

	.text05 span {
		font-family: 微软雅黑;
		font-size: 18px;
		color: #00b389;
		font-weight: bold;
	}

	.text06 {
		margin-left: 60px;
		font-family: 微软雅黑;
		font-size: 18px;
		color: #666;
		margin-top: 10px;
	}

	.text06 span {
		font-family: 微软雅黑;
		font-size: 18px;
		color: #00b389;
		font-weight: bold;
	}

	.contentImg {
		width: 276px;
		height: 291px;
		float: right;
		margin-top: -250px;
		margin-right: 180px;
		background: url(https://marketing.tom.com/img/icon_07.png) no-repeat 0 0;
		background-size: 276px 291px;
	}

	/* 企业特点 */
	.content_part04 {
		width: 100%;
		height: 640px;
		background-size: 100%;
		position: relative;
		background-color: #f3f5f9;
	}

	.center_content {
		height: 620px;
		width: 1152px;
		margin: 0 auto;
		position: relative;
	}

	.module_content {
		margin-top: 75px;
		margin-left: 35px;
	}

	.module1 {
		width: 288px;
		height: 349px;
		float: left;
		background: url(https://marketing.tom.com/img/ppdj.png) no-repeat;
		background-size: 100%;
	}

	.module_text01 {
		font-size: 24px;
		font-weight: bold;
		color: #00b389;
		text-align: center;
		margin-top: 160px;
	}

	.module_text02 {
		font-size: 18px;
		color: #00b389;
		text-align: center;
		margin-top: 28px;
	}

	.module2 {
		width: 288px;
		height: 388px;
		float: left;
		margin-left: -26px;
		background: url(https://marketing.tom.com/img/ppsz.png) no-repeat;
	}

	.module3 {
		width: 288px;
		height: 388px;
		float: left;
		margin-left: -26px;
		background: url(https://marketing.tom.com/img/ppsj.png) no-repeat;
	}

	.module4 {
		width: 288px;
		height: 388px;
		float: left;
		margin-left: -16px;

		background: url(https://marketing.tom.com/img/pxhy.png) no-repeat;

	}

	/* 试用 */
	.content_part09 {
		width: 100%;
		height: 455px;
		position: relative;
		background-color: #00b389;
		-webkit-appearance: none;
	}

	.content_part09 .center_content {
		height: 499px;
		width: 694px;
		margin: 0 auto;
		position: relative;
	}


	.content_part09 .center_content .title {
		padding-top: 68px;
		font-size: 36px;
		color: #fff;
		text-align: center;
	}

	.content_part09 .small_title {
		text-align: center;
		font-size: 20px;
		color: #fff;
		margin-top: 25px;
	}

	.content_part09 .inputbox {
		margin-top: 18px;
		font-size: 44px;
		color: #fff;
		position: absolute;
	}

	.content_part09 .inputbox01 {
		font-size: 44px;
		color: #fff;
		border: 1px solid;
		width: 302px;
		height: 40px;
		float: left;
		position: relative;
		margin-left: 30px;
		margin-top: 19px;
		background-color: #33c2a1;
	}

	.content_part09 .inputImg01 {

		font-size: 44px;
		color: #fff;
		width: 20px;
		height: 20px;
		float: left;
		background: url(https://marketing.tom.com/img/username.png) no-repeat 0 0;
		margin-left: 24px;
		margin-top: 10px;
		position: relative;
	}

	.content_part09 .inputImg02 {

		font-size: 44px;
		color: #fff;
		width: 20px;
		height: 20px;
		float: left;
		background: url(https://marketing.tom.com/img/companyname.png) no-repeat 0 0;
		margin-left: 24px;
		margin-top: 10px;
		position: relative;
	}

	.content_part09 .inputImg03 {

		font-size: 44px;
		color: #fff;
		width: 20px;
		height: 20px;
		float: left;
		background: url(https://marketing.tom.com/img/contactinfo.png) no-repeat 0 0;
		margin-left: 24px;
		margin-top: 10px;
		position: relative;
	}

	.content_part09 .inputImg04 {

		font-size: 44px;
		color: #fff;
		width: 20px;
		height: 20px;
		float: left;
		background: url(https://marketing.tom.com/img/position.png) no-repeat 0 0;
		margin-left: 24px;
		margin-top: 10px;
		position: relative;
	}


	#app>div>div.content_part09>div>div.inputbox>div:nth-child(1)>div.inputValue>input[type=text] {
		border: 0;
		color: white;
		font-size: 14px;
		outline: 0;
		width: 236px;
		background-color: #33c2a1;
	}

	#app>div>div.content_part09>div>div.inputbox>div:nth-child(2)>div.inputValue>input[type=text] {
		border: 0;
		color: white;
		font-size: 14px;
		outline: 0;
		width: 236px;
		background-color: #33c2a1;
	}

	#app>div>div.content_part09>div>div.inputbox>div:nth-child(3)>div.inputValue>input[type=text] {
		border: 0;
		color: white;
		font-size: 14px;
		outline: 0;
		width: 236px;
		background-color: #33c2a1;
	}

	#app>div>div.content_part09>div>div.inputbox>div:nth-child(4)>div.inputValue>input[type=text] {
		border: 0;
		color: white;
		font-size: 14px;
		outline: 0;
		width: 236px;
		background-color: #33c2a1;
	}

	.content_part09 .inputValue {
		font-size: 14px;
		color: white;
		float: left;
		margin-left: 10px;
		margin-top: 11px;
	}

	.confirmSubmit {
		width: 190px;
		height: 53px;
		border-radius: 64px;
		background-color: #ffc430;
		cursor: pointer;
		text-align: center;
		line-height: 53px;
		margin: 0 auto;
		margin-top: 187px;
	}

	.confirmSubmit span {
		cursor: pointer;
		text-align: center;
		line-height: 53px;
		font-size: 22px;
		color: #fff;
		margin: 0 auto;
	}

	/* 底部 */
	.content_part10 {
		width: 100%;
		height: 357px;
		position: relative;
		background-color: #3e3e3e;
	}

	.content_part10 .center_content {
		height: 267px;
		width: 1055px;
		margin: 0 auto;
		position: relative;
	}

	.content_part10 .bottom_icon {
		border-bottom: 1px solid;
		border-color: #999999;
		width: 1055px;
		height: 146px;
	}

	.content_part10 .bottom_icon .bottom_icon_box {
		width: 209px;
		height: 146px;
		float: left;
	}

	.iconImg01 {
		width: 100px;
		height: 44px;
		float: left;
		background: url(https://marketing.tom.com/img/icon_161.png) no-repeat 0 0;
		margin-left: 88px;
		margin-top: 48px;
	}

	.iconImg02 {

		width: 100px;
		height: 44px;
		float: left;

		margin-left: 84px;
		margin-top: 42px;

		background: url(https://marketing.tom.com/img/icon_17.png) no-repeat 0 0;

	}

	.iconImg03 {
		width: 100px;
		height: 44px;
		float: left;
		background: url(https://marketing.tom.com/img/icon_18.png) no-repeat 0 0;
		margin-left: 84px;
		margin-top: 42px;
	}

	.iconImg04 {
		width: 100px;
		height: 44px;
		float: left;
		background: url(https://marketing.tom.com/img/icon_19.png) no-repeat 0 0;
		margin-left: 84px;
		margin-top: 42px;
	}

	.iconImg05 {
		width: 100px;
		height: 44px;
		float: left;
		background: url(https://marketing.tom.com/img/icon_20.png) no-repeat 0 0;
		margin-left: 84px;
		margin-top: 42px;
	}

	.content_part10 .bottom_icon .bottom_icon_box .description {
		margin-top: 105px;
		margin-bottom: 38px;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}


	.content_part10 .copyright {
		width: 100%;
		height: 180px;
		position: relative;
		background-color:#3e3e3e;
	}
	.paragraph01{
		    position: relative;
		    color: #fff;
		    font-size: 14px;
		    text-align: center;
		    margin-top: 28px;
	}
	.paragraph02{
	  
	    text-align: center;
	    margin-top: 14px;
	    font-size: 12px;
	    color: #fff;
	}
	.paragraph03{
	
		     text-align: center;
		     margin-top: 10px;
		     font-size: 12px;
		     color: #fff;
	}
	/*end*/
	/* 右边悬浮 */
	.t1img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/service.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}
	
	.t2img {
		width: 20px;
		height: 20px;
		margin-top: 10px;
	}
	
	.t3img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/wx.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}
	
	.t4img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/top.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}
	
	.dada {
		width: 58px;
		height: 60px;
		margin: 0 auto;
		text-align: center;
		margin-top: 15px;
		border: 1px solid #999999;
		background-color: #FAFAFA;
	}
</style>

<template>
	<div class="root">

		<div class="top">
			<ul>
				<a href="">
					<li>首页</li>
				</a>
				<a href="">
					<li>资讯</li>
				</a>
				<a href="">
					<li>流行</li>
				</a>
				<a href="">
					<li>娱乐</li>
				</a>
				<a href="">
					<li>体育</li>
				</a>
				<a href="">
					<li>明星</li>
				</a>
				<a href="">
					<li>时尚</li>
				</a>
				<a href="">
					<li>游戏</li>
				</a>
				<a href="">
					<li>旅游</li>
				</a>
				<a href="">
					<li>生活</li>
				</a>
				<a href="">
					<li>母婴</li>
				</a>
				<a href="">
					<li class="yx">营销</li>
				</a>
				<a href="">
					<li>邮箱</li>
				</a>
				<a href="">
					<li>商业</li>
				</a>
				<a href="">
					<li>视频</li>
				</a>
				<a href="">
					<li>财经</li>
				</a>
				<a href="">
					<li>健康</li>
				</a>
				<a href="">
					<li>段子</li>
				</a>
				<a href="">
					<li>消费</li>
				</a>
				<a href="">
					<li>汽车</li>
				</a>
				<a href="">
					<li>购物</li>
				</a>
				<a href="">
					<li>科技</li>
				</a>
			</ul>
		</div>
		<!-- 广告页 -->
		<div class="top1">
			<div class="aq">
				<img style=" float: left;margin-top: 10px;inline-block;width: 143px;height: 60px;"
					src="https://www.tom.com/partner/tom_partner/tom_pc_logo.png">
				<span style="float: left;margin-top: 35px;margin-left: 10px;">
					<a href="">首页 > </a>
					<a href="">营销</a>
				</span>
			</div>
		</div>
		<!-- 大图 -->
		<div id="banna">
			<img src="https://marketing.tom.com/img/banner.png">
		</div>
		<!-- 搜索引擎介绍 -->
		<div class="content_part03">
			<div class="center_content">
				<div class="title">
					搜索引擎营销—<span>过亿用户</span>精准搜索
				</div>
				<div class="main_content">
					<div class="contentText">
						<div class="text01">
							强大的用户流量支持
						</div>
						<div class="text02">
							覆盖全行业、全媒体
						</div>
						<div class="text03">
							通过更精准的投放形式，把您的品牌展现给目标用户
						</div>
						<div class="text04">
							运用<span>创意的营销方法</span>
						</div>
						<div class="text05">
							吸引大量<span>自然流量</span>，实现<span>更持久排名</span>展示
						</div>
						<div class="text06">
							确保您的<span>品牌美誉度、影响力全面提升</span>
						</div>
						<div class="contentImg">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 企业特点 -->
		<div class="content_part04">

			<div class="center_content">
				<div class="title">
					<span>结合企业特点</span> 灵活定制营销解决方案
				</div>
				<div class="module_content">
					<div class="module1">
						<div class="module_text01">品牌搭建</div>
						<div class="module_text02">让消费者认识我</div>
					</div>
					<div class="module2">
						<div class="module_text01">品牌塑造</div>
						<div class="module_text02">让消费者了解我</div>
					</div>
					<div class="module3">
						<div class="module_text01">品牌升级</div>
						<div class="module_text02">让消费者记住我</div>
					</div>
					<div class="module4">
						<div class="module_text01">品效合一</div>
						<div class="module_text02">让消费者信赖我</div>
					</div>
				</div>
			</div>
		</div>

		<div id="">
			<a href="">
				<img src="https://ae01.alicdn.com/kf/H004a07cf58e0415496e920733fca81c9Y.png" style="width: 100%;">
			</a>
		</div>

		<div id="">
			<a href="">
				<img src="https://ae01.alicdn.com/kf/He25557fdbe32473490487f25fd794211c.png"  style="width: 100%;">
			</a>
		</div>
		<div id="">
			<a href="">
				<img src="https://ae01.alicdn.com/kf/H4a7cb840f72143de93c34c1849df1ea7j.png"  style="width: 100%;">
			</a>
		</div>
		<div id="">
			<a href="">
				<img src="https://ae01.alicdn.com/kf/H1965527075514eb6a56ac1b9e3900325k.png"  style="width: 100%;">
			</a>
		</div>

		<div class="content_part09">
			<div class="center_content">
				<div class="title">
					马上领取免费试用机会
				</div>
				<div class="small_title">
					距离业务量节节攀升，仅差一次真诚的来电
				</div>
				<div class="inputbox">
					<div class="inputbox01">
						<div class="inputImg01"></div>
						<div class="inputValue">
							<input type="text" name="firstname" placeholder="您的姓名" value="">
						</div>
					</div>
					<div class="inputbox01">
						<div class="inputImg02"></div>
						<div class="inputValue">
							<input type="text" name="company" placeholder="公司名称" value="">
						</div>
					</div>
					<div class="inputbox01">
						<div class="inputImg03"></div>
						<div class="inputValue">
							<input type="text" name="contact" placeholder="联系方式" value="">
						</div>
					</div>
					<div class="inputbox01">
						<div class="inputImg04"></div>
						<div class="inputValue">
							<input type="text" name="address" placeholder="您的地址" value="">
						</div>
					</div>
				</div>
				<div class="confirmSubmit">
					<span>确认提交</span>
				</div>
			</div>
		</div>
		<!-- 底部 -->

		<div class="content_part10">
			<div class="center_content">
				<div class="bottom_icon">
					<div class="bottom_icon_box">
						<div class="iconImg01 iconImg01new"></div>
						<div class="description">TOM品牌22年，实力保障</div>
					</div>
					<div class="bottom_icon_box">
						<div class="iconImg02"></div>
						<div class="description">一站式解决方案</div>
					</div>
					<div class="bottom_icon_box">
						<div class="iconImg03"></div>
						<div class="description">7x24小时服务</div>
					</div>
					<div class="bottom_icon_box">
						<div class="iconImg04"></div>
						<div class="description">全行业定制化服务</div>
					</div>
					<div class="bottom_icon_box">
						<div class="iconImg05"></div>
						<div class="description">千家品牌客户共同见证</div>
					</div>
				</div>
				<div class="copyright">
					<div class="paragraph01">
						<a  href="#" @click.prevent style="text-decoration: none;color:#fff">TOM网</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a  href="#" style="text-decoration: none;color:#fff">TOM企业邮箱</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<router-link  href="javascript:void(0)"  to="/ad"
							style="text-decoration: none;color:#fff">广告服务</router-link>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a  href="#"
							style="text-decoration: none;color:#fff">帮助中心</a>
					</div>
					<div class="paragraph02">
						Copyright © 2019 TOM.COM Corporation, All Rights Reserved 雷霆万钧版权声明
					</div>
					<div class="paragraph03">
						违法信息/未成年人举报：010-85181169 &nbsp;&nbsp;举报邮箱/未成年人举报：jubao@tomonline-inc.com
					</div>
				</div>
			</div>
		</div>

	<!-- 右边 -->
		
		<div class="right" style="position: fixed;right: 0;bottom: 100px;
			 text-align: center;height: 270px;width: 60px;">
			 
			<div class="dada">
				<div class="t1img"></div>
				<div class="t2zi">客服</div>
			</div>

			<div class="dada">
				<img class="t2img" src="https://marketing.tom.com/img/help.png">
				<div class="t3zi">帮助</div>
			</div>

			<div class="dada">
				<div class="t3img"></div>
				<div class="t4zi">微信</div>
			</div>

			<div class="dada" @click="top()">
				<div class="t4img"></div>
				<div class="t5zi">TOP</div>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		name: 'Home',
		methods: {
			// ad() {
			// 	// pushstate
			// 	this.$router.push('/ad');
			// },
			// home() {
			// 	this.$router.push('/Home');
			// },
			top() {
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}	
			
		},
		
	}
</script>

